@charset "utf-8"
@import "compass/css3"

.css_website_mail
    .has-error
        border-color: red
    .css_nav_month
        display: none
        &:first-of-type
            display: block

.read_width
    max-width: 700px
    margin-left: auto
    margin-right: auto

.blog_content
    a.oe_mail_expand:after
        content: " →"
    a.oe_mail_expand
        font-weight: bold

p.post-meta
    position: relative
    top: -5px

div#blog_angle_down
    a:hover
        text-decoration: none

.cover
    -webkit-background-size: cover
    -moz-background-size: cover
    -o-background-size: cover
    background-size: cover
    background-position: center
    background-repeat: no-repeat
    background-color: #000
    color: #fff
    position: relative
    .blog_title
        position: absolute
        text-align: center
        top: 20%
        left: 0
        right: 0
        h1
            font-weight: bold

.cover_footer
    min-height : 350px
    height: 65vh
    cursor: pointer

/* mobile preview: for blog h1,h2 font-size and cover-footer height of image overlapas */
@media (max-width: 768px)
    .cover
        h1
            font-size: 26px
        h2
            font-size: 20px
    .cover_footer
        min-height: 280px
        height: 50vh
        .blog_title
            top: 2%

/*Inline Discussion

.discussion
    padding: 5px 10px 10px
    position: absolute
    top: 0
    left: 0
    line-height: 16px
    font-size: 13px
    font-weight: bold
    font-family: sans-serif
    text-align: center
    z-index: 7
    > a
        opacity: 0
        display: block
        overflow: hidden
        width: 20px
        height: 17px
        color: white
        text-decoration: none
        cursor: pointer
        background: #bbbbbb
        -webkit-border-radius: 2px
        -moz-border-radius: 2px
        -ms-border-radius: 2px
        -o-border-radius: 2px
        border-radius: 2px
        -webkit-transition: all 0.5s
        -moz-transition: all 0.5s
        -o-transition: all 0.5s
        transition: all 0.5s
        &.has-comments
            opacity: .6

.discussion-contain:hover .discussion > a
    opacity: 1

.discussion
    > a:after
        border-right: 7px solid transparent
        border-top: 7px solid #bbbbbb
        right: 19px
        top: 22px
        height: 0
        width: 0
        display: block
        content: " "
        position: absolute
        -webkit-transition: all 0.5s
        -moz-transition: all 0.5s
        -o-transition: all 0.5s
        transition: all 0.5s
    &:hover > a, &.hovered > a
        opacity: 1
        background: #57AD68
    &:hover > a:after, &.hovered > a:after
        border-top-color: #57AD68

#discussions_wrapper
    position: absolute
    top: 0
    left: 0

#discussions_overlay
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: rgba(0, 0, 0, 0.5)
    z-index: 8
    display: none

.discussion .popover-content
    max-height: 250px
    width: 250px
    overflow: auto
    font-weight: normal

mark + .popover
    cursor: pointer

.discussion_scroll_post
    overflow-x: auto
